<template>
  <div class="quota_template">
    <!-- 文件 -->
    <div class="file">
      <draggable :title="'定额模板创建管理'" @clickItem="handelAddEngTypeList"></draggable>
    </div>
    <!-- 点击子文件的列表 -->
    <div class="content">
      <div class="sp_list">
        <draggableEngTypeList
          :list="data.engTypeList"
          :item="data.choseItem"
          @addEngTypeList="handelAddEngTypeLists"
          @getTableList="handelGetTableList"
          @serch="handelSerch"
        ></draggableEngTypeList>
      </div>
      <!-- 新增定额 -->
      <div class="de_tabel">
        <quotaTable :list="data.quotaTableList" :projectId="data.projectId" @updateList="getUpdateList"></quotaTable>
      </div>
      <div class="selected_box">
        <div class="selected_box_header">已选中{{ data.canNotList.length }}</div>
        <div class="selected_box_list">
          <ul>
            <li v-for="(item, index) in data.canNotList" :key="index">
              <span>{{ item.quotaName }}</span
              ><el-icon @click="handelClickDeleteCanNot(item)"><Delete /></el-icon>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, defineEmits, onMounted, defineProps, watch } from "vue";
import draggable from "./draggable.vue";
import draggableEngTypeList from "./draggableEngTypeList.vue";
import quotaTable from "./quotaTable.vue";
import { Delete } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
// api
import { getProject, quotaTemplateList } from "@/apis/createFile/index.js";
import { noPoplist, noPopDelete } from "@/apis/budgetQuotation/index.js";
// 变量定义
const data = reactive({ engTypeList: [], choseItem: {}, quotaTableList: [], projectId: "", canNotList: [] });
const emits = defineEmits(["getList"]);
// 方法定义
const props = defineProps({
  templateId: {
    type: String,
    default() {
      return "";
    }
  },
  setNum: {
    type: Number,
    default() {
      return 0;
    }
  }
});
// 获取选中的数据
const getUpdateList = list => {
  console.log(list, "00000000000000");
  data.canNotList = [...list];
  emits("getList", data.canNotList);
};
// 删除选中的数据
const handelClickDeleteCanNot = item => {
  if ("id" in item) {
    noPopDelete({ id: item.id }).then(res => {
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "删除成功"
        });
        canNotList();
        setTimeout(() => {
          emits("getList", data.canNotList);
        }, 1000);
      } else {
        ElMessage({
          type: "success",
          message: "删除失败"
        });
      }
    });
  } else {
    data.canNotList = data.canNotList.filter(it => it.quotaId !== item.quotaId);
    emits("getList", data.canNotList);
  }
};
const handelAddEngTypeList = item => {
  // alert(1)
  console.log(item, "点击子文件获取的列表");
  data.choseItem = item;
  let projectName = "";
  getProject(item.folderId, projectName).then(res => {
    res.data.map(it => {
      it.isStatus = it.status == 0 ? false : true;
    });
    console.log(res, "000000");

    data.engTypeList = res.data;
  });
};
const handelSerch = v => {
  console.log(v, "搜索的字符");
  let projectName = v;
  getProject(data.choseItem.folderId, projectName).then(res => {
    res.data.map(it => {
      it.isStatus = it.status == 0 ? false : true;
    });
    data.engTypeList = res.data;
  });
};
const handelAddEngTypeLists = item => {
  handelAddEngTypeList(data.choseItem);
};
// 获取定额表格数据
const handelGetTableList = item => {
  data.projectId = item.projectId;
  quotaTemplateList(item.projectId)
    .then(res => {
      if (res.code == 200) {
        res.data.map(it => {
          if (it.unit !== null) {
            console.log("1111");
            it.unit = it.unit.toString();
          } else {
            // it.unit = it.unit.toString();
          }
          it.isStatus = it.quotaState == 0 ? false : true;
          // it._checked = true;
        });
        data.quotaTableList = res.data;
      }
    })
    .catch(err => {
      data.quotaTableList = [];
      console.log(err, "错误");
    });
};
// 获取不可选择定额模板列表
const canNotList = () => {
  noPoplist(props.templateId).then(res => {
    if (res.code == 200) {
      data.canNotList = res.data;
    }
  });
};
// 生命周期
onMounted(() => {
  console.log(props.templateId, "templateId");
  canNotList();
});
// 监听
watch(
  () => props.setNum,
  () => {
    console.log(props.setNum, "setNum");

    canNotList();
  },
  { deep: true, immediate: true }
);
</script>
<style scoped lang="scss">
.quota_template {
  //   background-color: #e3f0fe;
  height: calc(100vh - 105px);
  display: flex;
  flex-direction: row;
  border-top: 1px solid #c2d4e8;
  box-sizing: border-box;
  .file {
    // flex: 1;
    border-right: 1px solid #c2d4e8;
    box-sizing: border-box;
  }
  .content {
    // flex: 2;
    // background-color: rgb(255, 255, 255);
    margin-left: 20px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    display: flex;
    .sp_list {
      height: 100%;
    }
    .de_tabel {
      height: 100%;
      padding: 20px;
      overflow: hidden;
      box-sizing: border-box;
      width: 100%;
    }
  }
}
.selected_box {
  min-width: 200px;
  background-color: #fff;
  border-left: 1px solid #c2d4e8;
  box-sizing: border-box;
  padding: 20px;
  overflow: hidden;
  .selected_box_header {
    font-size: 12px;
    color: #86909c;
    margin-bottom: 20px;
  }
  .selected_box_list {
    ul {
      li {
        line-height: 2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        i {
          cursor: pointer;
        }
      }
    }
  }
}
</style>
